<template>
  <el-select v-model="value" style="width: 240px" v-bind="$attrs" @visible-change="handleClick">
    <el-option
      v-for="item in store.view.data"
      :key="item[jsonAttr.id]"
      :label="item[jsonAttr.label]"
      :value="item[jsonAttr.value] ? item : item[jsonAttr.value]" 
    />
    <template v-slot:empty>
      <h4 v-if="store.view.status === 1">数据加载中....</h4>
      <el-button v-if="store.view.status === 3" type="primary" @click="retry">重试</el-button>
    </template>
  </el-select>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  store: Object,
  jsonAttr: Object
})

// 本身就不是响应式的属性无需使用toRef 其他响应式属性需要时记得使用toRefs
const { store, jsonAttr } = props

// 在页面刚打开时 初始化下拉框中的数据 还是点击下拉框时才会初始化数据
onMounted(async ()=>{
  if(store.autoLoad){
    await store.getData()
  }
})

const handleClick = async (val)=>{
  // 下拉框打开并且需要初始化加载数据时才会触发数据加载
  if(val && !store.autoLoad){
    await store.getData()
  }
  // 下拉框关闭时做的操作
  if(!val){}
}
// 错误重试
const retry = async ()=>{
  await store.getData()
}

const value = ref('')
</script>